<template>
  <div class="w-full h-full p-3 rounded-xl border-slate-200 bg-white">
    <div class="flex items-center content-center mb-2">
      <div class="flex items-center bg-indigo-50/60 rounded-lg py-0.5 px-2">
        <i class="iconfont icon-shishikucunshiyitu text-indigo-500 text-base"/>
        <span class="title font-semibold text-indigo-600 ml-1.5">{{
            $t('inventoryInforSummary.informationWarehousing')
          }}</span>
      </div>
      <div class="flex-1 h-[1px] bg-gradient-to-r from-indigo-200 via-indigo-100/50 to-transparent ml-3"></div>
      <el-form :inline="true" :model="from" class="align-center search-form" style="margin-bottom: 10px">
        <el-form-item class="label" :label="$t('iot.time')">
          <el-date-picker
            style="width: 220px" v-model="from.time" type="daterange"
            range-separator="-" :start-placeholder="$t('wms.startTime')" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            :end-placeholder="$t('wms.endTime')" class="custom-date-picker"/>
        </el-form-item>
        <el-button icon="Search" class="buttons" size="small" type="primary" @click="getSerch" style="margin-top: 3px">
          {{ $t('wms.search') }}
        </el-button>
      </el-form>
      <!-- <el-icon class="text-indigo-600 " style="margin-left: 10px;font-size: 24px" @click="goBack"><HomeFilled /></el-icon> -->
    </div>
    <div class="w-full mt-4 px-1 pb-3" style="height: 90%;overflow: hidden">
      <template v-if="list.length">
        <ul  ref="scrollList" @mouseover="pauseAutoScroll" @mouseout="resumeAutoScroll" class="infinite-list w-full" >
          <on-list-in v-for="(item,index) in list" :key="index" :item="item" :index="index"/>
        </ul>
      </template>
      <el-empty v-else description="暂无数据" />
    </div>
  </div>
</template>
<script setup>
import '@/assets/font/iconfont.css'
import { onMounted, reactive, ref,onBeforeUnmount } from 'vue'
import OnListIn from './onListIn.vue'
import cardScroll from './cardScroll.vue'
import {getInstockData } from '@/api/generalViewApi'
import moment from 'moment'
import router from '@/router'

const list = ref([])
const scrollList = ref(null) // 引用 ul 元素

const from = reactive({
  time: [],
})
onMounted(async () => {
  await getDefaultDateRange()
  startAutoScroll()
})

const getDefaultDateRange = () => {
  const start = moment().subtract(0, 'days').format('YYYY-MM-DD')// 本月一号
  const end = moment().format('YYYY-MM-DD') // 今天
  from.time = [start, end]
  barList()
}
const barList = () => {
  getInstockData({
    startTime: from.time[0],
    endTime: from.time[1]
  }).then(res => {
    list.value = []
    if (res.code == 0) {
      list.value = res.data
    }
  })
}

const getSerch = () => {
  barList()
}


// 自动滚动函数
let scrollInterval

const startAutoScroll = () => {
  scrollInterval = setInterval(() => {
    if (scrollList.value) {
      scrollList.value.scrollTop += 1
      if (scrollList.value.scrollTop >= scrollList.value.scrollHeight - scrollList.value.clientHeight) {
        scrollList.value.scrollTop = 0
      }
    }
  }, 30) // 每 30 毫秒滚动一次
}

const stopAutoScroll = () => {
  clearInterval(scrollInterval)
}
// 暂停自动滚动
const pauseAutoScroll = () => {
  stopAutoScroll()
}

// 恢复自动滚动
const resumeAutoScroll = () => {
  startAutoScroll()
}
// 在组件卸载前停止自动滚动
onBeforeUnmount(() => {
  stopAutoScroll()
})

const goBack =() =>{
  router.push('/warehouseEntry');
}
</script>

<style scoped lang="scss">
:deep(.el-form) {
  height: 18px;
  display: flex;
  justify-content: center;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1; /* 完全可见 */
  }
  50% {
    opacity: 0.5; /* 半透明 */
  }
}

.dynamic-text {
  font-size: 38px;
  font-weight: bold;
  background: linear-gradient(270deg, #120101, #01350b, #162c02);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient 3s ease infinite, blink 1s infinite; /* 应用渐变和闪烁动画 */
}

.card-box, .card-box2 {
  background-image: url("@/assets/images/bgcard.png");
  background-size: cover; /* 使背景图像覆盖整个元素 */
  background-position: center; /* 使背景图像居中 */
  background-repeat: no-repeat; /* 不重复背景图像 */
  padding-left: 30px;
  padding-top: 30px;
}

.card-box2 {
  transform: scaleX(-1);
  transform: scaleY(-1);
  padding-top: 26px;
}

.text-box {
  transform: scaleX(-1);
  transform: scaleY(-1);
  padding-top: 15px;
}

.infinite-list {
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
}

</style>
